<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <title>会员账号管理</title>
</head>
<body>
  <div class="layui-fluid">   
    <div class="layui-card">
      <!-- 查询区域  -->
      <div id="query-form" class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-inline">
              <input type="text" name="smobile" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
              <input type="text" name="suserName" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
              <infopub:select entireName="-状态" name="istatus" type="dic" groupNo="A00010020"></infopub:select>
            </div>
          </div>
          <br>
          <div class="layui-inline">
            <label class="layui-form-label">查看权限</label>
            <div class="layui-input-inline">
              	<select id="selectViewAuthBox" name="viewAuth">
        			<option value="">请选择-查看权限</option>
					<option value="0">自己视频</option>
					<option value="1">全部视频</option>
				</select>
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">上传权限</label>
            <div class="layui-input-inline">
              	<select id="selectUploadAuthBox" name="uploadAuth">
	        		<option value="">请选择-上传权限</option>
					<option value="1">可上传</option>
					<option value="0">不可上传</option>
				</select>
            </div>
          </div>
          <shiro:hasPermission name="HY_LIST_OPT">
	          <div class="layui-inline">
	            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-front-search">
	              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
	            </button>
	          </div>
          </shiro:hasPermission>
        </div>
      </div>
  	  <!-- 按钮区域  -->
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <shiro:hasPermission name="HY_SAVE">
          	<button class="layui-btn layuiadmin-btn-admin " data-type="add">
          	 <i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>新增
          	</button>
          </shiro:hasPermission>
        </div>
        <!-- 数据表单 -->
        <table id="LAY-user-front-manage" lay-filter="LAY-user-front-manage"></table>
        
        <div class="layui-form" lay-filter="add_form" id="add_form" style="padding: 20px 30px 0 0;display:none">
		    <div class="layui-form-item">
		      <label class="layui-form-label">姓名</label>
		      <div class="layui-input-inline">
		        <input type="text" name="suserName" maxlength="20" lay-verify="required|CHS" placeholder="请输入姓名" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item">
		      <label class="layui-form-label">手机号</label>
		      <div class="layui-input-inline">
		        <input type="text" name="smobile" maxlength="11" lay-verify="required|phone|number" placeholder="请输入手机号" onblur="checkMobile(this);" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">查看权限</label>
			    <div class="layui-input-block">
				    <input type="radio" name="viewAuthValue" value="0" title="自己视频" checked>
	      			<input type="radio" name="viewAuthValue" value="1" title="全部视频">
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">上传权限</label>
			    <div class="layui-input-block">
					<input type="radio" name="uploadAuthValue" value="1" title="可上传" checked>
      				<input type="radio" name="uploadAuthValue" value="0" title="不可上传">
			    </div>
		  	</div>
		    <div class="layui-form-item layui-hide">
		      <input type="button" lay-submit lay-filter="add_form_submit" id="add_form_submit" value="确认">
		    </div>
	  	</div>
	  	
        <div class="layui-form" lay-filter="edit_form" id="edit_form" style="padding: 20px 30px 0 0;display:none">
        	<input type="hidden" name="id" id="editAccountId" />
		    <div class="layui-form-item">
		      <label class="layui-form-label">姓名</label>
		      <div class="layui-input-inline">
		        <input type="text" name="suserName" maxlength="20" lay-verify="required|CHS" placeholder="请输入姓名" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item">
		      <label class="layui-form-label">手机号</label>
		      <div class="layui-input-inline">
		        <input type="text" name="smobile" maxlength="11" lay-verify="required|phone|number" placeholder="请输入手机号" onblur="checkNewMobile(this);" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">查看权限</label>
			    <div class="layui-input-block">
			    	<input type="radio" name="viewAuthValue" value="0" title="自己视频">
	      			<input type="radio" name="viewAuthValue" value="1" title="全部视频">
			    </div>
		  	</div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">上传权限</label>
			    <div class="layui-input-block">
			    	<input type="radio" name="uploadAuthValue" value="1" title="可上传">
      				<input type="radio" name="uploadAuthValue" value="0" title="不可上传">
			    </div>
		  	</div>
		    <div class="layui-form-item layui-hide">
		      <input type="button" lay-submit lay-filter="edit_form_submit" id="edit_form_submit" value="确认">
		    </div>
	  	</div>
	  	
  		<!-- 修改密码div  -->
       	<div id="w_editpwd" lay-filter="w_editpwd" class="layui-form" style="padding: 20px 30px 0 0;display:none">
         	<input type="hidden" name="cid" />
            <div class="layui-form-item">
              <label class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input id="edit_password" type="password" maxlength="30" name="pasword" lay-verify="required|pass" lay-verType="tips"  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">8到16个字符</div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">确认新密码</label>
              <div class="layui-input-inline">
                <input id="repwd" type="password" maxlength="30" name="pasword1" lay-verify="required|editrepass" lay-verType="tips" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit id="lay-edit-pwd-submit" lay-filter="lay-edit-pwd-submit" value="确认修改"/>
            </div>
       	</div>
        	
      </div>
    </div>
  </div>

  <script>
  	layui.config({
    	base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
  	}).extend({
    	index: 'lib/index' //主入口模块
  	}).use(['index', 'table', 'set', 'transfer'], function(){
    	var $ = layui.$
    	,form = layui.form
    	,table = layui.table;
 		// 正则校验
    	form.verify({
    	 	pass: [
    	    	/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)^.{8,16}$/
    	    	,'必须同时包含大写字母、小写字母、数字'
    	  	],
    	  	editrepass:function(t){
    		  	if(t !== $("#edit_password").val())
    			  	return"两次密码输入不一致"
    		},
    		//验证汉字
    	    CHS: [
    	    	/^[\u0391-\uFFE5]+$/
    	    	,'只能输入汉字'
    	  	]
		});

    	// 表单
    	table.render({
      		elem: '#LAY-user-front-manage'
      		,url: basePath + '/baseInfo/queryByCondition' //请求数据接口
      		,cols: [[
        		{type: 'checkbox', fixed: 'left'}
        		,{field: 'saccountId', title: '账户ID'}
        		,{field: 'suserName', title: '姓名'}
        		,{field: 'smobile', title: '手机号'}
        		,{field: 'taddTime', title: '创建时间', templet: function(d){
            		  	return layui.util.toDateString(d.taddTime,"yyyy-MM-dd HH:mm:ss");
	              	}
	             }
        		,{field: 'istatus', title: '状态', templet: function (d) {
	        			if(d.istatus==1){
	          				return "启用中";
	          			}else{return '<span class="layui-badge layui-bg-cyan">已停用</span>' ;}
		        	}
 		    	}
        		,{field: 'viewAuth', title: '查看权限'}
        		,{field: 'uploadAuth', title: '上传权限'}
        		,{title: '操作', width: 250, align:'center', fixed: 'right', templet: function(d){
      	  				var optStr ="";
      	  				<shiro:hasPermission name="HY_SAVE">
	      	 				optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
  	  	  				</shiro:hasPermission>
  	  	  				<shiro:hasPermission name="HY_EDIT_OPT">
		  	  	  			if(d.istatus == 0){//停用
	      	 					optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="use"><i class="layui-icon layui-icon-edit"></i>启用</a>';
		   	        		}else if(d.istatus == 1){//启用
	      	 					optStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="freeze"><i class="layui-icon layui-icon-edit"></i>停用</a>';
		   	        		}
						</shiro:hasPermission>
			  		  	<shiro:hasPermission name="HY_PWD_OPT">
				  		 	optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="changePwd"><i class="layui-icon layui-icon-edit"></i>修改密码</a>';
			  		  	</shiro:hasPermission>
			  		  	return optStr;
        			}
        		}
      			]]
      		,page: true
      		,limit: 10
    	});
    
    	<shiro:hasPermission name="HY_LIST_OPT">
	    	//监听搜索
	    	form.on('submit(LAY-user-front-search)', function(data){
		      	//执行重载
		      	table.reload('LAY-user-front-manage', {page: {curr: 1},
		        	where: trimData(data)
		      	});
	    	});
    	</shiro:hasPermission>
    
    	// 监听操作列
    	table.on('tool(LAY-user-front-manage)', function(obj){
      		var data = obj.data;
      		if(obj.event === 'use'){
          		layer.confirm('确定启用？',{icon:3, title :'提示'}, function(index){
          			$.ajax({
  						type : 'post',
  						url : basePath + '/baseInfo/updateStatus?id=' + data.id,
  						success:function(result){
  							if(result.success){
  								table.reload('LAY-user-front-manage'); //数据刷新
  								layer.close(index);
  							}else{
  								layer.msg(result.msg,{icon: 7});
  				  			}
  						}
  					});
          		});
      		}else if(obj.event === 'freeze'){
          		layer.confirm('确定停用？',{icon:3, title :'提示'}, function(index){
          			$.ajax({
  						type : 'post',
  						url : basePath + '/baseInfo/updateStatus?id=' + data.id,
  						success:function(result){
  							if(result.success){
  								table.reload('LAY-user-front-manage'); //数据刷新
  								layer.close(index);
  							}else{
  								layer.msg(result.msg,{icon: 7});
  				  			}
  						}
  					});
          		});
      		} else if(obj.event === 'edit'){
      			form.val('edit_form',data); // 填充原值
      			layer.open({
            		type: 1
            		,title: '编辑用户'
            		,content: $('#edit_form')
            		,area: layui.admin.screen() < 2 ? ['80%', '360px'] : ['420px','360px']
            		,btn: ['确定', '取消']
            		,btnAlign: 'c'
            		,yes: function(index, layero){
          	  			var submitID = 'edit_form_submit'
          		  		,submit = layero.contents().find('#'+ submitID);
          	  			//监听提交
          	  			form.on('submit('+ submitID +')', function(data){
                			var field = data.field; //获取提交的字段
                			//提交 Ajax 成功后，静态更新表格中的数据
                			$.ajax({
                    			type : 'post',
  								url : basePath + '/baseInfo/save',
                    			data: field,
  								success:function(result){
  									if(result.success){
                						table.reload('LAY-user-front-manage'); //数据刷新
                						layer.close(index); //关闭弹层
  									}else{
  										layer.msg(result.msg,{icon: 7});
  					  				}
  								}
                			});
              			});  
              		submit.trigger('click');
           		}
          	});
       	}else if(obj.event === 'changePwd'){//修改密码
      	  	$("input[name=cid]").val(data.id);
      	  		layer.open({
            	 	title: '用户<' + data.srealName + '>修改密码'
                	,type: 1
                	,shadeClose: false
                	,btn: ['确定', '取消']
                	,btnAlign: 'c'
               		,area: layui.admin.screen() < 2 ? ['80%', '250px'] : ['450px', '250px']
                	,content: $('#w_editpwd')
                	,yes: function(index, layero){
              	  		var submitID = 'lay-edit-pwd-submit'
              		  	,submit = layero.contents().find('#'+ submitID);
              	  		// 修改密码提交
    		    		form.on('submit('+ submitID +')', function(data){
  	  		    			$.post(basePath + '/baseInfo/change-password', data.field, function(result) {
  	  		    				if (result.success) {
  	  								layer.msg('密码修改成功~',{icon: 1});
  	  								layer.close(index);
  	  								clean_form("w_editpwd");//清空表单
  	  							}else{
  	  								layer.msg(result.msg,{icon: 7});
  	  							}
  	  						});
  	  		    		});
   		    			submit.trigger('click');
               		}
             	});
        	}
    	});
    
    // 按钮事件
    var active = {
      add: function(){
        layer.open({
          type: 1
          ,title: '添加用户'
          ,content: $('#add_form')
          ,area: layui.admin.screen() < 2 ? ['80%', '360px'] : ['420px','360px']
          ,btn: ['确定', '取消']
          ,btnAlign: 'c'
          ,yes: function(index, layero){
        	  var submitID = 'add_form_submit'
            	,submit = layero.contents().find('#'+ submitID);

              //监听提交
           	  form.on('submit('+ submitID +')', function(data){
              	var field = data.field; //获取提交的字段
              	//提交 Ajax 成功后，静态更新表格中的数据
              	$.ajax({
                  	type : 'post',
					url : basePath + '/baseInfo/save',
                  	data: field,
					success:function(result){
						if(result.success){
              				table.reload('LAY-user-front-manage'); //数据刷新
              				clean_form("add_form");//清空表单
              				layer.close(index); //关闭弹层
						}else{
							layer.msg(result.msg,{icon: 7});
					  	}
					}
              	});
            });  
            submit.trigger('click');
          }
        }); 
      }
    }  
    // data-type事件
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
  	
  	var $ = layui.$;
  	var layer = layui.layer;
  	/**校验手机号码是否被占用（新增时使用）*/
	function checkMobile(obj){
		var flag = true;
		$.post(
				"${ctx}/baseInfo/checkMobileIsExist",
				{
					"smobile":obj.value
				},
				function(data){//data: true 手机号被占用, false 手机号未被占用
					if(data){//符合格式,到后台校验 输入的新手机号,是否被占用
						layer.alert('该手机号码已被占用',{icon: 0});
						flag = false;
					}
				});
		return flag;
	}
	/**校验手机号码是否被占用（编辑时使用）*/
	function checkNewMobile(obj){
		var flag = true;
		$.post(
				"${ctx}/baseInfo/checkNewMobileIsExist",
				{
					"smobile":obj.value,
					"id":$("#editAccountId").val()
				},
				function(data){//data: true 手机号被占用, false 手机号未被占用
					if(data){//符合格式,到后台校验 输入的新手机号,是否被占用
						layer.alert('该手机号码已被占用',{icon: 0});
						flag = false;
					}
					
				});
		return flag;
	}
  </script>
</body>
</html>

